<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
		<link rel="stylesheet" href="../../../css/common.css" media="all">
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>

		<div class="layui-fluid">
			<div class="layui-row" id="view">
				<form class="layui-form" lay-filter="test_detail">
					<div class="layui-card">
						<div class="layui-card-body">
							<div class="layui-form-item">
								<label class="layui-form-label">名称：</label>
								<div class="layui-input-block">
									<input type="text" name="name" placeholder="请输入名称" autocomplete="off"
										class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">标题：</label>
								<div class="layui-input-block">
									<input type="text" name="title" placeholder="请输入标题" autocomplete="off"
										class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">状态：</label>
								<div class="layui-input-block">
									<select name="status" lay-verify="status">
										<option value="0">停用</option>
										<option value="1">启用</option>
									</select>
								</div>
							</div>
							<div class="layui-form-itme" style="margin-bottom: 20px;">
								<label class="layui-form-label"
									style="white-space: nowrap;padding-left: 0;">频道图标文字：</label>
								<div class="layui-inline">
									<label class="layui-form-label">颜色</label>
									<div class="layui-inline">
										<input type="text" name="font_color" placeholder="#FFFFFF" autocomplete="off"
											class="layui-input">
									</div>
									<div id="colorPicker" class="layui-inline"></div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">大小</label>
									<div class="layui-inline">
										<!-- <input type="text" name="font_size" placeholder="请选择字体大小(rpx=px / 2)" autocomplete="off" class="layui-input"> -->
										<!-- <select id="fontselect" name="font_size" lay-filter="level">
											<option id="selectOp"  value="">请选择字号默认28rpx(14px)</option>
										</select> -->
										<el-select name="font_size" v-model="font_size"
											placeholder="请选择字号默认28rpx(14px)">
											<el-option v-for="item in fontSizeList" :key="item.index"
												:label="item.label" :value="item.value" @change="fontSizeChange">
												<span
													:style="{'float': 'left', fontSize: (item.value / 2) + 'px' }">{{ item.label }}</span>
											</el-option>
										</el-select>
									</div>
									<!-- <div id="selectFont" class="layui-inline" style="cursor: pointer;">选择</div> -->
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">加粗</label>
									<div class="layui-inline">
										<!-- <input type="text" name="font_bold" placeholder="请选择字体粗细" autocomplete="off" class="layui-input" > -->
										<!-- <select id="BoldSelect" name="font_bold" lay-filter="level2">
											<option id="selectOp2" value="">请选择字体类型</option>
										</select> -->
										<el-select name="font_bold" v-model="font_bold" placeholder="请选择字体粗细">
											<el-option v-for="item in fontBoldList" :key="item.index"
												:value="item.value" @change="fontBoldChange">
												<span :style="{ 'font-weight': item.value }">{{ item.label }}</span>
											</el-option>
										</el-select>
									</div>
									<!-- <div id="selectBold" class="layui-inline" style="cursor: pointer;">选择</div> -->
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">类型标识：</label>
								<div class="layui-input-block">
									<input type="text" name="method" placeholder="请输入类型标识" autocomplete="off"
										class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">上级编号：</label>
								<div class="layui-input-block">
									<span id="sjid" style="line-height: 36px;"></span>
									<input type="hidden" name="fid" />
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">图标：</label>
								<div class="layui-input-block">
									<div class="layui-inline margin_bottom0" style="width: 58%;">
										<input placeholder="选择文件上传" name="icon" class="layui-input" lay-verify="icon" />
									</div>
									<span id="showicon" style="font-size: 24px;margin-right: 10px;"></span>
									<!-- <button type="button" class="layui-btn layui-btn-normal" id="choose_img">选择文件上传</button> -->
									<button type="button" class="layui-btn layui-btn-normal"
										id="choose_icon">选择展示图标</button>
									<!-- <button type="button" class="layui-btn layui-btn-normal" id="choose_img">选择文件上传</button> -->
									<!-- <input type="text" name="hospital" placeholder="请输入采集医院" autocomplete="off" class="layui-input"> -->
								</div>
								<div class="layui-input-block" style="margin-top: 20px;">
									<button type="button" class="layui-btn layui-btn-normal"
										id="choose_img">选择文件上传</button>
									<div id="IconBox"
										style="width: 100px;height:100px;border: 1px solid #f5f5f5;margin-top: 20px;display: none;">
										<img id="selectImg" style="width: 100px;height: 100px;" alt="">
									</div>
									<div id="deleteImgbox"
										style="text-align: center;width: 100px;cursor: pointer;display: none;">
										<span>删除</span>
									</div>
								</div>
							</div>






							<div class="layui-form-item">
								<label class="layui-form-label">选中图片：</label>
								<div class="layui-input-block">
									<!-- <div class="layui-inline margin_bottom0" style="width: 58%;">
										<input placeholder="选择文件上传" name="select_img" class="layui-input" lay-verify="select_img" />
									</div> -->
									<input type="hidden" name="select_img" class="layui-input"
										lay-verify="select_img" />
									<button type="button" class="layui-btn layui-btn-normal"
										id="choose_select_img">选择文件上传</button>
									<div id="select_img_box"
										style="width: 100px;height:100px;border: 1px solid #f5f5f5;margin-top: 20px;display: none;">
										<img id="select_img" style="width: 100px;height: 100px;" alt="">
									</div>
									<div id="select_img_delete"
										style="width: 100px;text-align: center;cursor: pointer;display: none;">删除</div>
								</div>
							</div>


							<div class="layui-form-item">
								<label class="layui-form-label">默认图片：</label>
								<div class="layui-input-block">
									<!-- <div class="layui-inline margin_bottom0" style="width: 58%;">
										<input placeholder="选择文件上传" name="default_img" class="layui-input" lay-verify="default_img" />
									</div> -->
									<input type="hidden" name="default_img" class="layui-input"
										lay-verify="default_img" />
									<button type="button" class="layui-btn layui-btn-normal"
										id="choose_default_img">选择文件上传</button>
									<div id="default_img_box"
										style="width: 100px;height:100px;border: 1px solid #f5f5f5;margin-top: 20px;display: none;">
										<img id="default_img" style="width: 100px;height: 100px;" alt="">
									</div>
									<div id="default_img_delete"
										style="width: 100px;text-align: center;cursor: pointer;display: none;">删除</div>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">页面路径：</label>
								<div class="layui-input-block">
									<input placeholder="请输入页面路径" name="pagepath" class="layui-input"
										lay-verify="pagepath" />
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">图标路径：</label>
								<div class="layui-input-block">
									<input placeholder="请输入图标路径" name="iconpath" class="layui-input"
										lay-verify="iconpath" />
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label"
									style="white-space: nowrap;padding-left: 0;">选中图标路径：</label>
								<div class="layui-input-block">
									<input placeholder="请输入选中图标路径" name="selectediconpath" class="layui-input"
										lay-verify="selectediconpath" />
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">目录：</label>
								<div class="layui-input-block">
									<input type="text" name="path" placeholder="请输入目录" autocomplete="off"
										class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">模板：</label>
								<div class="layui-input-block">
									<input type="text" name="tpl" placeholder="请输入模板" autocomplete="off"
										class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">链接：</label>
								<div class="layui-input-block">
									<input type="text" name="url" placeholder="请输入链接" autocomplete="off"
										class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">备注：</label>
								<div class="layui-input-block">
									<input type="text" name="notes" placeholder="请输入备注" autocomplete="off"
										class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">排序：</label>
								<div class="layui-input-block">
									<input type="text" name="oid" placeholder="请输入排序" autocomplete="off"
										class="layui-input">
								</div>
							</div>
						</div>
					</div>

					<div class="layui-form-item layui-layout-admin">
						<div class="layui-input-block">
							<div class="layui-footer" style="left: 0;">
								<!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
								<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
		<script src="../../../layuiadmin/layui/layui.js"></script>
		<script src="../../../js/jquery.min.js"></script>
		<script src="../../../js/jquery.jqprint-0.3.js"></script>
		<script src="../../../js/common.js"></script>
		<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			var fontSizeList = [{
					value: 28,
					index: 0,
					label: '28rpx'
				},
				{
					value: 32,
					index: 1,
					label: '32rpx'
				},
				{
					value: 36,
					index: 2,
					label: '36rpx'
				},
				{
					value: 40,
					index: 3,
					label: '40rpx'
				},
				{
					value: 44,
					index: 4,
					label: '44rpx'
				},
				{
					value: 48,
					index: 5,
					label: '48rpx'
				},
				{
					value: 52,
					index: 6,
					label: '52rpx'
				},
				{
					value: 56,
					index: 7,
					label: '56rpx'
				},
				{
					value: 60,
					index: 8,
					label: '60rpx'
				}
			]
			var fontBoldList = [{
					value: 'normal',
					label: '常规',
					index: 0
				},
				{
					value: 'lighter',
					label: '细体',
					index: 1
				},
				{
					value: 'bold',
					label: '粗体(小)',
					index: 2
				},
				{
					value: 'bolder',
					label: '粗体(大)',
					index: 3
				},
				{
					value: '100',
					label: '100',
					index: 4
				},
				{
					value: '200',
					label: '200',
					index: 5
				},
				{
					value: '300',
					label: '300',
					index: 6
				},
				{
					value: '400',
					label: '400',
					index: 7
				},
				{
					value: '500',
					label: '500',
					index: 8
				},
				{
					value: '600',
					label: '600',
					index: 9
				},
				{
					value: '700',
					label: '700',
					index: 10
				},
				{
					value: '800',
					label: '800',
					index: 11
				},
				{
					value: '900',
					label: '900',
					index: 12
				}
			]
			var app = new Vue({
				el: '.layui-fluid',
				data() {
					return {
						fontSizeList: fontSizeList,
						fontBoldList: fontBoldList,
						font_size: '',
						font_bold: ''
					}
				},
				methods: {
					fontSizeChange(e) {
						console.log(e, 'eeeeeee')
					},
					fontBoldChange(e) {
						console.log(e, '-----88-')
					}
				},
			})
			var _data = {
				fid: getParam('fid'),
				id: getParam('id'),
			}
			if (getParam('fid')) {
				$('#sjid').html(getParam('fid'))
				$("input[name=fid]").val(getParam('fid'))
			}

			// console.log(_data.id);

			layui.config({
				base: '../../../layuiadmin/' //静态资源所在路径
			}).extend({
				index: 'lib/index' //主入口模块
			}).use(['index', 'form', 'laytpl', 'laydate', 'upload', 'colorpicker'], function() {
				var $ = layui.$,
					admin = layui.admin,
					laytpl = layui.laytpl,
					upload = layui.upload,
					laydate = layui.laydate,
					form = layui.form,
					colorpicker = layui.colorpicker;

				// 渲染 select数据
				// let html = ''
				// for(var i=0;i<fontSizeList.length;i++) {
				// 	html += `<option value="${fontSizeList[i].size}"><template slot="text"><div class="opthi" style="font-size:${(fontSizeList[i].size/2)}px;">${fontSizeList[i].size}rpx</div></template></option>`
				// }
				// $("#selectOp").after(html)

				// let html2 = ''

				//  for(let i=0;i<fontBoldList.length;i++) {
				// 	 html2 += `<option value="${fontBoldList[i].value}">${fontBoldList[i].name}</option>`
				// }
				//  $('#selectOp2').after(html2)
				// form.render();

				colorpicker.render({
					elem: '#colorPicker', //绑定元素
					color: '#FFFFFF',
					format: 'hex',
					done: function(color) {
						$('input[name=font_color]').val(color)
					}
				});


				$('.opthi').on('click', function(e) {
					let value = e.delegateTarget.innerHTML
					console.log(value)
					_data.font_size = value
				})

				// $('#selectFont').on('click', function() {
				// 	layer.open({
				// 		type: 2,
				// 		title: '选择字体大小',
				// 		shadeClose: false,
				// 		shade: 0.5,
				// 		maxmin: true, //开启最大化最小化按钮
				// 		area: ['400px', '500px'],
				// 		content: 'fontSize_map.html',
				// 		end: function() {},
				// 		success:function(layer,index){

				// 		}
				// 	})
				// })

				// $('#selectBold').on('click', function() {
				// 	layer.open({
				// 		type: 2,
				// 		title: '选择字体粗细',
				// 		shadeClose: false,
				// 		shade: 0.5,
				// 		maxmin: true, //开启最大化最小化按钮
				// 		area: ['400px', '500px'],
				// 		content: 'fontBold_map.html',
				// 		end: function(res) {
				// 		},
				// 		success:function(layer,index){

				// 		}
				// 	})
				// })

				// window.getFontBold = function(val) {
				// 	$('input[name=font_bold]').val(val)
				// }


				// window.getFontSize = function(val) {
				// 	$('input[name=font_size]').val(val + 'rpx')
				// }

				if (_data.id) {
					initdata()
				}
				//监听提交
				form.on('submit(demo1)', function(data) {
					var data = data.field;
					_data = Object.assign(_data, data);
					// console.log(JSON.stringify(_data), '000000')
					// console.log(_data);
					layer.confirm('确定要提交数据？', function() {
						loading();
						if (_data.id) {
							submitdata(server.editsubshopmodule);
						} else {
							delete _data.id
							submitdata(server.addsubshopmodule);
						}
					}, function() {
						layer.msg('取消操作');
					});
					return false;
				});

				// console.log(parent.parent)
				console.log(parent.layer)

				function submitdata(_url) {
					$.post(_url, _data, function(res, status) {
						if (status == 'success') {
							if (res.code == 0) {
								closeloading();
								layer.alert('操作成功', function() {
									parent.layer.closeAll();
									// console.log(parent.parent.window.location);
									parent.parent.initdata();
									parent.layui.table.reload('test-table-operate');
								});
							} else {
								closeloading();
								layer.msg(res.msg);
							}
						} else {
							layer.msg('服务器连接错误');
						}
					});
				}

				$('#choose_icon').on('click', function() {
					$('#showicon').removeClass();
					layer.open({
						type: 2,
						title: '选择图标',
						shadeClose: false,
						shade: 0.5,
						maxmin: true, //开启最大化最小化按钮
						area: ['400px', '500px'],
						content: 'icon_map.html',
						end: function() {},
						success: function(layer, index) {

						}
					});
				});

				//选完文件后不自动上传
				upload.render({
					elem: '#choose_img',
					url: server.upimg,
					// auto: false,
					// bindAction: '#choose',
					accept: 'file',
					before: function() {
						loading();
					},
					done: function(res) {
						console.log(res)
						if (res.file) {
							$('#showicon').removeClass();
							layer.msg('上传成功,请保存');
							_data.icon = res.file;
							// $('#selectImg').src(res.file)
							let selectImg = document.getElementById('selectImg')
							let IconBox = document.getElementById('IconBox')
							let deleteImgbox = document.getElementById('deleteImgbox')
							IconBox.style.display = 'block'
							selectImg.src = res.file
							deleteImgbox.style.display = 'block'
							$('input[name=icon]').val(res.file);
							closeloading();
						}
					}
				});


				// 上传选中图片
				upload.render({
					elem: '#choose_select_img',
					url: server.upimg,
					accept: 'file',
					before: function() {
						loading();
					},
					done: function(res) {
						if (res.file) {
							console.log(res)
							let select_img_box = document.getElementById('select_img_box')
							let select_img = document.getElementById('select_img')
							let select_img_delete = document.getElementById('select_img_delete')
							$('input[name=select_img]').val(res.file)
							select_img_box.style.display = 'block'
							select_img.src = res.file
							select_img_delete.style.display = 'block'
							layer.msg('上传成功,请保存');
							closeloading();
						}
					}
				})

				$('#select_img_delete').on('click', function() {
					layer.confirm('确定要删除吗?', function() {
						let select_img_box = document.getElementById('select_img_box')
						let select_img = document.getElementById('select_img')
						let select_img_delete = document.getElementById('select_img_delete')
						$('input[name=select_img]').val('')
						select_img_box.style.display = 'none'
						select_img.src = ' '
						select_img_delete.style.display = 'none'
						layer.msg('删除成功')
					})
				})


				// 上传默认图片
				upload.render({
					elem: '#choose_default_img',
					url: server.upimg,
					accept: 'file',
					before: function() {
						loading();
					},
					done: function(res) {
						if (res.file) {
							let default_img_box = document.getElementById('default_img_box')
							let default_img = document.getElementById('default_img')
							let default_img_delete = document.getElementById('default_img_delete')
							$('input[name=default_img]').val(res.file)
							default_img_box.style.display = 'block'
							default_img.src = res.file
							default_img_delete.style.display = 'block'
							layer.msg('上传成功,请保存')
							closeloading()
						}
					}
				})

				$('#default_img_delete').on('click', function() {
					layer.confirm('确定要删除吗?', function() {
						let default_img_box = document.getElementById('default_img_box')
						let default_img = document.getElementById('default_img')
						let default_img_delete = document.getElementById('default_img_delete')
						$('input[name=default_img]').val('')
						default_img_box.style.display = 'none'
						default_img.src = ' '
						default_img_delete.style.display = 'none'
						layer.msg('删除成功')
					})
				})

				function initdata() {
					$.get(server.detailsubshopmodule, _data, function(res, status) {
						if (status == 'success') {
							if (res.code == 0) {
								var data = res.module
								if (data.data.icon) {
									// if(data.data.icon.split(' ').indexOf('layui-icon')) {
									// 	alert('layui-图标')
									// }
									let icon = data.data.icon.split(' ')[0]
									if (icon === 'layui-icon') {
										// alert('layui-icon')
										$('#showicon').addClass(data.data.icon)
									} else {
										let selectImg = document.getElementById('selectImg')
										let IconBox = document.getElementById('IconBox')
										let deleteImgbox = document.getElementById('deleteImgbox')
										deleteImgbox.style.display = 'block'
										IconBox.style.display = 'block'
										selectImg.src = data.data.icon
									}
								}

								if (data.data.select_img) {
									let select_img_box = document.getElementById('select_img_box')
									let select_img = document.getElementById('select_img')
									let select_img_delete = document.getElementById('select_img_delete')
									select_img_box.style.display = 'block'
									select_img.src = data.data.select_img
									select_img_delete.style.display = 'block'
									$('input[name=select_img]').val(data.data.select_img)
								}

								if (data.data.default_img) {
									let default_img_box = document.getElementById('default_img_box')
									let default_img = document.getElementById('default_img')
									let default_img_delete = document.getElementById('default_img_delete')
									default_img_box.style.display = 'block'
									default_img.src = data.data.default_img
									default_img_delete.style.display = 'block'
									$('input[name=default_img]').val(data.data.default_img)
								}

								form.val("test_detail", data.data);
								form.render();
							} else {
								layer.msg(res.msg);
							}
						} else {
							layer.msg('服务器连接错误');
						}
					});
				}
				$('#deleteImgbox').on('click', function() {
					layer.confirm('确定删除图标?', function() {
						let IconBox = document.getElementById('IconBox')
						IconBox.style.display = 'none'
						let selectImg = document.getElementById('selectImg')
						selectImg.src = ' '
						let deleteImgbox = document.getElementById('deleteImgbox')
						deleteImgbox.style.display = 'none'
						$('#showicon').removeClass();
						$('input[name=icon]').val('');
						layer.msg('删除成功')
					})
				})
			});
		</script>
	</body>
</html>